<template>
<view>
<!-- 倒计时 -->
<view class="countDown">
  <view class="countDowm-left">
    <view class="title1">
      <text>超值</text>
      <text style="color:#E51F54">秒杀</text>
    </view>
    <view class="title2">先抢先得</view>
  </view>
  <view v-if="isOver" class="countDowm-right">
    <view>距结束</view>
    <view class="endTime">
      <view>{{overTime[0]}}</view>:
      <view>{{overTime[1]}}</view>:
      <view>{{overTime[2]}}</view>
    </view>
  </view>
  <view v-if="!isOver" class="countDowm-right">
    <view>活动已结束</view>
  </view>
</view>
<!-- 倒计时End -->
<!-- 秒杀列表 -->
<view v-for="(item, index) in shopList.list" :key="index" class="shopList">
  <view class="listImg">
    <image :src="item.thumb_img"></image>
    <!-- <view class='stock'>剩余<text style='color:#FFFDE9'>111</text>件</view> -->
  </view>
  <view class="listTitle">
    <view class="listTitle-top">
      <text>{{item.goods_name}}</text>
    </view>
    <view class="listTitle-bottom">
      <view class="listTitle-bottom-left">
        <view class="l-b-l-top">
          <text style="font-size:30rpx">￥</text>
          <text>{{item.promote_price}}</text>
        </view>
        <view class="l-b-l-bottom">
          <text style="font-size:28rpx">￥</text>
          <text>{{item.price}}</text>
        </view>
      </view>
      <view v-if="isOver" @tap="toSpikeShop" :data-index="index" class="listTitle-bottom-right">
        <view>立即抢购</view>
      </view>
      <view v-if="!isOver" class="listTitle-bottom-right-active">
        <view>已结束</view>
      </view>
    </view>
  </view>
</view>
<!-- 秒杀列表End -->
</view>
</template>

<script>
import api from "../../../api";
var app = getApp();
var countTime;

export default {
  data() {
    return {
      userId: '',
      //微擎参数
      requestShopId: '',
      // 秒杀商品列表
      shopList: '',
      // 倒计时数组
      overTime: [],
      // 判断活动是否结束
      isOver: true
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    this.getUnicodeid();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    //获取微擎参数
    getUnicodeid() {
      var that = this;
      wx.getStorage({
        key: 'requestShopId',
        success: function (res) {
          console.log(res);
          that.setData({
            requestShopId: res.data
          });
          that.getList();
        }
      });
    },

    // 获取秒杀商品
    getList() {
      let that = this;
      app.globalData.request({
        url: api.fyz.spikeShop,
        data: {// uniacid: that.data.requestShopId.uniacid,
          // acid: that.data.requestShopId.acid,
          // version: that.data.requestShopId.version,
          // platform: 'wx'
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 默认值

        },
        method: 'POST',
        dataType: 'json',
        responseType: 'text',
        success: res => {
          console.log(res);
          that.setData({
            shopList: res
          }); // 计时器

          countTime = setInterval(that.countDown, 1000);
        },
        fail: function (res) {},
        complete: function (res) {}
      });
    },

    // 倒计时
    countDown() {
      let endTime = parseInt(this.shopList.end_time);
      let nowTime = parseInt(new Date().getTime() / 1000); // console.log(nowTime, endTime)

      let time = endTime - nowTime;
      var hour = parseInt(time / 60 / 60);

      if (String(hour).length == 1) {
        hour = '0' + hour;
      }

      var minute = parseInt(time / 60 % 60);

      if (String(minute).length == 1) {
        minute = '0' + minute;
      }

      var seconds = parseInt(time % 60);

      if (String(seconds).length == 1) {
        seconds = '0' + seconds;
      } // console.log(hour, minute, seconds)


      let timer = [];
      timer[0] = hour;
      timer[1] = minute;
      timer[2] = seconds; // console.log(timer)

      if (time > 0) {
        this.setData({
          overTime: timer,
          isOver: true
        });
      } else {
        clearInterval(countTime);
        this.setData({
          isOver: false
        });
      }
    },

    // 跳转秒杀商品详情
    toSpikeShop(e) {
      let that = this; // console.log(e.currentTarget.dataset.index)

      let index = e.currentTarget.dataset.index;
      console.log(that.shopList.list[index].goods_id);
      console.log(that.shopList.list[index].thumb_img);
      console.log(that.shopList.end_time);
      wx.navigateTo({
        url: '../spikeShop/spikeShop?img=' + that.shopList.list[index].thumb_img + '&goods_id=' + that.shopList.list[index].goods_id + '&endTime=' + that.shopList.end_time + '&a=' + that.shopList.list[index].promote_price + '&b=' + that.shopList.list[index].price
      });
    }

  }
};
</script>
<style>
@import "./spikeShopList.css";
</style>